<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        (1/2)Vue构建单页应用最佳实战_慕课手记
    </title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <meta property="qc:admins" content="77103107776157736375" />
    <meta property="wb:webmaster" content="c4f857219bfae3cb" />
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <meta http-equiv="Cache-Control" content="no-transform " />
    <meta name="Description" content="前言 我们将会选择使用一些vue周边的库 1.使用node.js后台，了解到如何获取数据 2.实现单页路由 3.实现HTTP请求我们的node 4.单项数据流 5.使用.vue文件进行开发 最终我们将会构建出一个小demo，不废话，直接上图。 安装 1.我们将会使用webpack去为我们的模块打包，预处理，热加载。如果你对webpack不熟悉，它就是可以帮助我们把多个js文件打包为1个入口文件，并且可以达到按需加载。这就意味着，我们不用担心由于使用太多的组件，导致了过多的HTTP请求，这是非常有益于产品体验的。但"/>
    <link rel="stylesheet" href="/Statics/css/base.css?v=1461734761" type="text/css"/>
    <link rel="stylesheet" href="/Statics/css/common-less.css?v=1461734761" type="text/css"/>
    <link rel="stylesheet" href="/Statics/css/shouji/sjd-detail-less.css?v=1461734761" type="text/css"/>
    <link rel="stylesheet" href="/Statics/css/font-awesome.min.css" type="text/css" />



</head>
<body >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--header-->
    <div id="header">

        <div class="page-container" id="nav">
            <div id="logo" class="logo"><a href="/" target="_self" class="hide-text">微客教育网</a></div>


            <button type="button" class="navbar-toggle visible-xs-block js-show-menu" >
                <i class="icon-menu"></i>
            </button>
            <!--未登录时显示-->
            <ul class="nav-item">
                <!--<li class="set-btn visible-xs-block"><a href="/user/newlogin" target="_self">登录</a> / <a href="/user/newsignup" target="_self">注册</a></li>-->
                <li>
                    <a href="<?php echo U('Course/index');?>"  target="_self">课程</a>
                </li>
                <li><a href="<?php echo U('Wenda/index');?>" class="active" target="_self">猿问</a></li>
                <li><a href="<?php echo U('Shouji/index');?>" target="_self">手记</a></li>
            </ul>
            <!--登录注册 未登录才显示 start-->
            <!--<div id="login-area">-->
            <!--<ul class="header-unlogin clearfix">-->
            <!--<li class="header-signin">-->
            <!--<a href="#" id="js-signin-btn">登录</a>-->
            <!--</li>-->
            <!--<li class="header-signup">-->
            <!--<a href="#" id="js-signup-btn">注册</a>-->
            <!--</li>-->
            <!--</ul>-->
            <!--</div>-->
            <!--登录注册 未登录才显示 end-->

            <!--已登录才显示-->
            <div id="login-area">
                <ul class="clearfix logined">
                    <li class="set_btn user-card-box">
                        <a id="header-avator" class="user-card-item" action-type="my_menu" href="/u/3224635/courses"
                           target="_self"><img src='http://img.mukewang.com/user/545862aa0001f8da02200220-40-40.jpg'
                                               width='40' height='40'/>
                            <i class="myspace_remind" style="display: none;"></i>
                            <span style="display: none;">动态提醒</span>
                        </a>
                        <div class="g-user-card">
                            <div class="card-inner">
                                <div class="card-top">
                                    <a href="<?php echo U('Ucenter/index');?>"><img
                                            src="http://img.mukewang.com/545862aa0001f8da02200220-100-100.jpg"
                                            alt="慕粉3224635" class="l"></a>
                                    <a href="<?php echo U('Ucenter/index');?>"><span class="name text-ellipsis">慕粉3224635</span></a>
                                    <p class="meta">
                                        <a href="<?php echo U('Ucenter/experience');?>">经验<b id="js-user-mp">40</b></a>
                                        <a href="<?php echo U('Ucenter/credit');?>">积分<b id="js-user-credit">0</b></a>
                                    </p>

                                    <!--<a href="<?php echo U('Ucenter/setprofile');?>" class='icon-set setup'></a>-->
                                    <a href="<?php echo U('Ucenter/setprofile');?>" class='icon-set setup'>
                                        <i class="fa fa-cog"></i>
                                    </a>

                                </div>
                                <!--
                                <div class="card-links">
                                    <a href="/space/index" class="my-mooc l">我的慕课<i class="dot-update"></i></a>
                                    <span class="split l"></span>
                                    <a href="/myclub/myquestion/t/ques" class="my-sns l">我的社区</a>
                                </div>
                                -->
                                <div class="card-history">
                                    <span class="history-item">
                                        <span class="tit text-ellipsis">响应式布局</span>
                                        <span class="media-name text-ellipsis">1-4 设计原则</span>
                                        <i class="icon-clock"></i>
                                        <a href="<?php echo U('Course/play?vid=494');?>" class="continue">继续</a>
                                    </span>
                                </div>
                                <div class="card-sets clearfix">
                                    <a href="<?php echo U('Wenda/question');?>" target="_blank" class="l mr30">发问题</a>
                                    <a href="<?php echo U('Shouji/write');?>" target="_blank" class="l">写文章</a>
                                    <a href="/passport/user/logout?referer=http://www.imooc.com" class="r">退出</a>
                                </div>
                            </div>
                            <i class="card-arr"></i>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>


<!--<script>-->
    <!--var isLogin=1-->
<!--</script>-->
<div class="opus-wrap clearfix">

    <div class="detail-left l">
        <!-- 面包屑 -->
        <div class="detail-path">
            <a href="/article">手记</a> \
            <span>(1/2)Vue构建单页应用最佳实战</span>
        </div>
        <!-- 面包屑end -->
        <!-- 文章详情 -->
        <div class="detail-content-wrap">
            <h1 class="detail-title">
                (1/2)Vue构建单页应用最佳实战
                <span class="type">原创</span>        </h1>
            <div class="dc-addon clearfix">
                <div class="dc-profile clearfix">
                    <span class="spacer l">1天前</span>
                    <span class="spacer l spacer-2">269浏览</span>
                    <a class="spacer l" href="#comment" >1评论</a>
                </div>
            </div>

            <div class="detail-content ">
                <strong style="display:block;font-size:22px;margin:22px 0 10px">前言</strong>
                <p>我们将会选择使用一些vue周边的库</p>
                <blockquote>
                    <p>1.使用node.js后台，了解到如何获取数据<br />
                        2.实现单页路由<br />
                        3.实现HTTP请求我们的node<br />
                        4.单项数据流<br />
                        5.使用.vue文件进行开发</p>
                </blockquote>
                <p>最终我们将会构建出一个小demo，不废话，直接上图。<br />
                    <img title=(1/2)Vue构建单页应用最佳实战_图片1 src="http://7xim8z.com1.z0.glb.clouddn.com/vue-tutorial-4.png" /></p>
                <strong style="display:block;font-size:22px;margin:22px 0 10px">安装</strong>
                <p>1.我们将会使用webpack去为我们的模块打包，预处理，热加载。如果你对webpack不熟悉，它就是可以帮助我们把多个js文件打包为1个入口文件，并且可以达到按需加载。这就意味着，我们不用担心由于使用太多的组件，导致了过多的HTTP请求，这是非常有益于产品体验的。但我们并不只是为了这个而使用webpack，我们需要用webpack去编译.vue文件，如果没有使用一个loader去转换我们.vue文件里的style、js和html，那么浏览器就无法识别。</p>
                <p>2.模块热加载是webpack的一个非常碉堡的特性，将会为我们的单页应用带来极大的便利。<br />
                    通常来说，当我们修改了代码刷新页面，那应用里的所有状态就都没有了。这对于开发一个单页应用来说是非常痛苦的，因为需要重新在跑一遍流程。如果有模块热加载，当你修改了代码，你的代码会直接修改，页面并不会刷新，所以状态也会被保留。</p>
                <p>3.Vue也为我们提供了CSS预处理，所以我们可以选择在.vue文件里写LESS或者SASS去代替原生CSS。</p>
                <p>4.我们过去通常需要使用npm下载一堆的依赖，但是现在我们可以选择Vue-cli。这是一个vue生态系统中一个伟大创举。这意味着我们不需要手动构建我们的项目，而它就可以很快地为我们生成。</p>
                <p>首先，安装vue-cli。(确保你有node和npm)</p>
                <p><code>npm i -g vue-cli</code></p>
                <p>然后创建一个webpack项目并且下载依赖</p>
                <p><code>vue init webpack vue-time-tracker</code><br />
                    <code>cd vue-time-tracker</code><br />
                    <code>npm i</code></p>
                <p>接着使用 <code>npm run dev</code> 在热加载中运行我们的应用</p>
                <p>这一行命令代表着它会去找到<code>package.json</code>的<code>scripts</code>对象，执行<code>node bulid/dev-server.js</code>。在这文件里，配置了Webpack，会让它去编译项目文件，并且运行服务器，我们在<code>localhost:8080</code>即可查看我们的应用。</p>
                <p><img title=(1/2)Vue构建单页应用最佳实战_图片2 src="https://cdn.scotch.io/9/vFba0QgQRReyNZPgFpKU_vue-time-1.png" alt="" target="_blank" rel="nofollow" /></p>
                <p>这些都准备好后，我们需要为我们的路由和XHR请求下载两个库，我们可以从vue的官网中找到他们。</p>
                <p><code>npm i vue-resource vue-router --save</code></p>
                <h3>初始化（main.js）</h3>
                <p>查看我们的应用文件，我们可以在src目录下找到<code>App.vue</code>和<code>main.js</code>。在<code>main.js</code>文件中，我们引入<code>Vue</code>和<code>App</code>，并且创建了一个vue的实例（因为在router这行引入了App组件<code>router.start(App, '#app')</code>）</p>
<pre class="prettyprint"><code class="language-javascript">// src/main.js

    import Vue from 'vue'
    import App from './App.vue'
    import Hello from './components/Hello.vue'

    import VueRouter from 'vue-router'
    import VueResource from 'vue-resource'

    //注册两个插件
    Vue.use(VueResource)
    Vue.use(VueRouter)

    const router = new VueRouter()

    // 路由map
    router.map({
    '/hello': {
    component: Hello
    }
    })

    router.redirect({
    '*': '/hello'
    })

    router.start(App, '#app')</code></pre>
                <p>我们还需要在<code>index.html</code>包裹下我们的<code>&lt;app&gt;&lt;/app&gt;</code></p>
<pre class="prettyprint"><code class="language-html">//index.html

    &lt;div id="app"&gt;
    &lt;app&gt;&lt;/app&gt;
    &lt;/div&gt;</code></pre>
                <p>我们的初始化就到这结束了，接下来让我们开始创建别的组件。</p>
                <h3>创建首页 View</h3>
                <p>首先，我们需要为我们的应用增加下bootstrap.css，为了方便，在这就直接在头部引入CDN。</p>
<pre class="prettyprint"><code class="language-html">&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;计划板&lt;/title&gt;
    &lt;link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"&gt;
    &lt;/head&gt;</code></pre>
                <p>接着在App.vue里为我们的应用写个顶部导航。</p>
<pre class="prettyprint"><code class="language-js">// src/App.vue

    &lt;template&gt;
    &lt;div id="wrapper"&gt;
    &lt;nav class="navbar navbar-default"&gt;
    &lt;div class="container"&gt;
    &lt;a class="navbar-brand" href="#"&gt;
    &lt;i class="glyphicon glyphicon-time"&gt;&lt;/i&gt;
    计划表
    &lt;/a&gt;
    &lt;ul class="nav navbar-nav"&gt;
    &lt;li&gt;&lt;a v-link="'/home'"&gt;首页&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a v-link="'/time-entries'"&gt;计划列表&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/div&gt;
    &lt;/nav&gt;
    &lt;div class="container"&gt;
    &lt;div class="col-sm-3"&gt;

    &lt;/div&gt;
    &lt;div class="col-sm-9"&gt;
    &lt;router-view&gt;&lt;/router-view&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/template&gt;</code></pre>
                <p>除了我们的<code>navbar</code>以外，我们还需要一个<code>.container</code>去放我们其余需要展示的信息。<br />
                    并且在这里我们要放一个<code>router-view</code>标签，<code>vue-router</code>的切换就是通过这个标签开始显现的。</p>
                <p>接着，我们需要创建一个<code>Home.vue</code>作为我们的首页</p>
<pre class="prettyprint"><code class="language-js">// src/components/Home.vue

    &lt;template&gt;
    &lt;div class="jumbotron"&gt;
    &lt;h1&gt;任务追踪&lt;/h1&gt;
    &lt;p&gt;
    &lt;strong&gt;
    &lt;a v-link="'/time-entries'"&gt;创建一个任务&lt;/a&gt;
    &lt;/strong&gt;
    &lt;/p&gt;
    &lt;/div&gt;
    &lt;/template&gt;</code></pre>
                <p>既然我们需要显示Home，那就需要开始配置路由，这很简单，只需要在<code>main.js</code>里把<code>Hello.vue</code>换为<code>Home.vue</code>即可</p>
<pre class="prettyprint"><code class="language-js">//...
    router.map({
    '/Home': {
    component: Home
    }
    })

    router.redirect({
    '*': '/Home'
    })</code></pre>
                <p><img title=(1/2)Vue构建单页应用最佳实战_图片3 src="http://7xim8z.com1.z0.glb.clouddn.com/vue-tutorial-1.png" /></p>
                <h3>创建 任务列表 View</h3>
                <p>在这个页面，我们需要去创建我们的时间跟踪列表。</p>
                <blockquote>
                    <p>PS:现在这个页面没有数据，之后我们会在后台配置</p>
                </blockquote>
<pre class="prettyprint"><code class="language-js">
    // src/components/TimeEntries.vue

    &lt;template&gt;
    &lt;div&gt;
    //`v-if`是vue的一个指令
    //`$route.path`是当前路由对象的路径，会被解析为绝对路径当
    //`$route.path !== '/time-entries/log-time'`为`true`是显示，`false`，为不显示。
    //v-link 路由跳转地址
    &lt;button
    v-if="$route.path !== '/time-entries/log-time'"
    v-link="'/time-entries/log-time'"
    class="btn btn-primary"&gt;
    创建
    &lt;/button&gt;

    &lt;div v-if="$route.path === '/time-entries/log-time'"&gt;
    &lt;h3&gt;创建&lt;/h3&gt;
    &lt;/div&gt;

    &lt;hr&gt;

    //下一级视图
    &lt;router-view&gt;&lt;/router-view&gt;

    &lt;div class="time-entries"&gt;
    &lt;p v-if="!timeEntries.length"&gt;&lt;strong&gt;还没有任何任务&lt;/strong&gt;&lt;/p&gt;

    &lt;div class="list-group"&gt;
    //v-for 循环渲染
    &lt;a class="list-group-item" v-for="timeEntry in timeEntries"&gt;
    &lt;div class="row"&gt;

    &lt;div class="col-sm-2 user-details"&gt;
    //`:src`属性，这个是vue的属性绑定简写`v-bind`可以缩写为`:`
    // 比如a标签的`href`可以写为`:href`
    //并且在vue的指令里就一定不要写插值表达式了(`:src={{xx}}`)，vue自己会去解析
    &lt;img :src="timeEntry.user.image" class="avatar img-circle img-responsive" /&gt;
    &lt;p class="text-center"&gt;
    &lt;strong&gt;
    {{ timeEntry.user.name }}
    &lt;/strong&gt;
    &lt;/p&gt;
    &lt;/div&gt;

    &lt;div class="col-sm-2 text-center time-block"&gt;
    &lt;h3 class="list-group-item-text total-time"&gt;
    &lt;i class="glyphicon glyphicon-time"&gt;&lt;/i&gt;
    {{ timeEntry.totalTime }}
    &lt;/h3&gt;
    &lt;p class="label label-primary text-center"&gt;
    &lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;
    {{ timeEntry.date }}
    &lt;/p&gt;
    &lt;/div&gt;

    &lt;div class="col-sm-7 comment-section"&gt;
    &lt;p&gt;{{ timeEntry.comment }}&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class="col-sm-1"&gt;
    &lt;button
    class="btn btn-xs btn-danger delete-button"
    //事件绑定简写 @xxx
    @click="deleteTimeEntry(timeEntry)"&gt;
    X
    &lt;/button&gt;
    &lt;/div&gt;

    &lt;/div&gt;
    &lt;/a&gt;

    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/template&gt;</code></pre>
                <p>关于template的解释，都写在一起了，再看看我们的<code>script</code></p>
<pre class="prettyprint"><code class="language-js">// src/components/TimeEntries.vue

    export default {
    data () {
    // 事先模拟一个数据
    let existingEntry = {
    user: {
    name: '二哲',
    email: 'kodo@forchange.cn',
    image: 'https://sfault-avatar.b0.upaiyun.com/888/223/888223038-5646dbc28d530_huge256'
    },
    comment: '我的一个备注',
    totalTime: 1.5,
    date: '2016-05-01'
    }

    return {
    timeEntries: [existingEntry]
    }
    },
    methods: {
    deleteTimeEntry (timeEntry) {
    //这个方法用于删除某一项计划
    let index = this.timeEntries.indexOf(timeEntry)
    if (window.confirm('确定要删除吗?')) {
    this.timeEntries.splice(index, 1)
    //这里会派发到父组件上，执行父组件events里的deleteTime方法
    this.$dispatch('deleteTime', timeEntry)
    }
    }
    },
    events: {
    timeUpdate (timeEntry) {
    this.timeEntries.push(timeEntry)
    //继续向上派发
    return true
    }
    }
    }
</code></pre>
                <p>别忘了为我们的组件写上一些需要的样式</p>
<pre class="prettyprint"><code class="language-js">// src/components/TimeEntries.vue

    &lt;style&gt;
    .avatar {
    height: 75px;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 10px;
    }
    .user-details {
    background-color: #f5f5f5;
    border-right: 1px solid #ddd;
    margin: -10px 0;
    }
    .time-block {
    padding: 10px;
    }
    .comment-section {
    padding: 20px;
    }
    &lt;/style&gt;</code></pre>
                <p>由于新增了页面，所以我们继续配置我们的路由</p>
<pre class="prettyprint"><code class="language-js">// src/main.js

    import TimeEntries from './components/TimeEntries.vue'

    //...

    router.map({
    '/home': {
    component: Home
    },
    '/time-entries': {
    component: TimeEntries
    }
    })

    //...</code></pre>
                <p><img title=(1/2)Vue构建单页应用最佳实战_图片4 src="http://7xim8z.com1.z0.glb.clouddn.com/vue-tutorial-2.png" /></p>
                <h3>创建任务组件</h3>
                <p>这个比较简单我们直接给出代码</p>
<pre class="prettyprint"><code class="language-js">// src/components/LogTime.vue

    &lt;template&gt;
    &lt;div class="form-horizontal"&gt;
    &lt;div class="form-group"&gt;
    &lt;div class="col-sm-6"&gt;
    &lt;label&gt;日期&lt;/label&gt;
    &lt;input
    type="date"
    class="form-control"
    v-model="timeEntry.date"
    placeholder="Date"
    /&gt;
    &lt;/div&gt;
    &lt;div class="col-sm-6"&gt;
    &lt;label&gt;时间&lt;/label&gt;
    &lt;input
    type="number"
    class="form-control"
    v-model="timeEntry.totalTime"
    placeholder="Hours"
    /&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
    &lt;div class="col-sm-12"&gt;
    &lt;label&gt;备注&lt;/label&gt;
    &lt;input
    type="text"
    class="form-control"
    v-model="timeEntry.comment"
    placeholder="Comment"
    /&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;button class="btn btn-primary" @click="save()"&gt;保存&lt;/button&gt;
    &lt;button v-link="'/time-entries'" class="btn btn-danger"&gt;取消&lt;/button&gt;
    &lt;hr&gt;
    &lt;/div&gt;

    &lt;/template&gt;

    export default {
    data () {
    return {
    //模拟一个默认值
    timeEntry: {
    user: {
    name: '二哲',
    email: 'kodo@forchange.cn',
    image: 'https://sfault-avatar.b0.upaiyun.com/888/223/888223038-5646dbc28d530_huge256'
    }
    }
    }
    },
    methods: {
    save () {
    let timeEntry = this.timeEntry
    this.$dispatch('timeUpdate', timeEntry)
    this.timeEntry = {}
    }
    }
    }
</code></pre>
                <p>这个组件很简单就3个input输入而已，然后就两个按钮，保存我们就把数据push进我们的列表里，并且初始化我们的timeEntry。取消的话，我们就路由定位到<code>/time-entries</code>即可。</p>
                <blockquote>
                    <p>ps:按理来说我们应该是要填写6个数据包括名字，邮箱和头像。但这里为了演示就暂时先这样。以后结合后台我们会继续完善这里。</p>
                </blockquote>
                <p><code>LogTime</code>属于我们<code>TimeEntries</code>组件的一个子路由，所以我们依旧需要配置下我们的<code>router.map</code></p>
<pre class="prettyprint"><code class="language-js">// src/main.js

    import LogTime from './components/LogTime.vue'

    //...

    router.map({
    '/home': {
    component: Home
    },
    '/time-entries': {
    component: TimeEntries,
    subRoutes: {
    '/log-time': {
    component: LogTime
    }
    }
    }
    })

    //...</code></pre>
                <p><img title=(1/2)Vue构建单页应用最佳实战_图片5 src="http://7xim8z.com1.z0.glb.clouddn.com/vue-tutorial-3.png" /></p>
                <h3>创建侧边栏组件</h3>
                <p>目前我们首页左侧还有一块空白，我们需要它放下一个侧边栏去统计所有计划的总时间。</p>
<pre class="prettyprint"><code class="language-js">// src/App.vue

    //...

    &lt;div class="container"&gt;
    &lt;div class="col-sm-3"&gt;
    &lt;sidebar :time="totalTime"&gt;&lt;/sidebar&gt;
    &lt;/div&gt;
    &lt;div class="col-sm-9"&gt;
    &lt;router-view&gt;&lt;/router-view&gt;
    &lt;/div&gt;
    &lt;/div&gt;

    //...</code></pre>
                <p>由于我们把总时间存放在最上级的父组件上，所以我们需要把我们的总时间传入我们的<code>sidebar</code>组件。</p>
                <p>在写下我们的两个时间计算方法</p>
<pre class="prettyprint"><code class="language-js">
    import Sidebar from './components/Sidebar.vue'

    export default {
    components: { 'sidebar': Sidebar },
    data () {
    return {
    totalTime: 1.5
    }
    },
    events: {
    timeUpdate (timeEntry) {
    this.totalTime += parseFloat(timeEntry.totalTime)
    },
    deleteTime (timeEntry) {
    this.totalTime -= parseFloat(timeEntry.totalTime)
    }
    }
    }
</code></pre>
                <p>最后给出我们<code>Sidebar.vue</code></p>
<pre class="prettyprint"><code>&lt;template&gt;
    &lt;div class="panel panel-default"&gt;
    &lt;div class="panel-heading"&gt;
    &lt;h1 class="text-center"&gt;已有时长&lt;/h1&gt;
    &lt;/div&gt;

    &lt;div class="panel-body"&gt;
    &lt;h1 class="text-center"&gt;{{ time }} 小时&lt;/h1&gt;
    &lt;/div&gt;

    &lt;/div&gt;
    &lt;/template&gt;

    export default {
    props: ['time']
    }
</code></pre>
                <p><code>props</code>就是vue中传值的写法，不仅要在我们自定义的标签上传入<code>&lt;sidebar :time="totalTime"&gt;&lt;/sidebar&gt;</code>，还需要在组件里js里定义<code>props: ['time']</code></p>
                <h3>最后</h3>
                <p>本章，我们可以学习到许多关于vue的特性。</p>
                <p>1.了解了vue-cli脚手架</p>
                <p>2.初步对webpack有了一些了解和认识</p>
                <p>3.如何用.vue愉快的开发</p>
                <p>4.父子组件通信</p>
                <p>5.路由（子路由）的应用</p>
                <blockquote>
                    <p>下一章，我们将会结合node学习vue-resource，更好的完善我们SPA应用</p>
                </blockquote>
                <p>github地址：https://github.com/MeCKodo/vue-tutorial</p>
            </div>
            <p class="original">本文原创发布于慕课网 ，转载请注明出处，谢谢合作！</p>
            <!-- 标签 -->
            <div class="cat-box clearfix">
                <a class="cat l" href="/article/tag/13" target="_blank">Node.js</a>
                <a class="cat l" href="/article/tag/14" target="_blank">Html5</a>
                <a class="cat l" href="/article/tag/17" target="_blank">JavaScript</a>
            </div>

            <div class="active-box clearfix">
                <!-- 推荐 -->
                <div class="praise-box l">
                <span id="js-praise" data-id="6991" class="dc-praise l">
                    <i class="sns-thumb-up l"></i>
                    <span class="praise l">推荐</span>
                </span>
                    <var class="cutoff l">|</var>
                    <span class="praise-num">9</span>
                </div>
                <!-- 推荐end -->

                <!-- 分享 -->
                <div class="share-rl-tips share-posi js-share-statue">
                    <span>分享即可 +</span><strong>1积分</strong>
                    <span class="rule-arrow"></span>
                </div>
                <div class="small-share l">
                    <ul class="share-wrap">
                        <li class="weichat-posi">
                            <div class="bdsharebuttonbox weichat-style">
                                <a href="#" class="bds_weixin icon-nav icon-share-weichat" data-cmd="weixin" title="分享到微信"></a>
                                <a href="#" class="bds_tsina icon-nav icon-share-weibo" data-cmd="tsina" title="分享到新浪微博"></a>
                                <a href="#" class="bds_qzone icon-nav icon-share-qq" data-cmd="qzone" title="分享到QQ空间"></a>
                            </div>
                        </li>
                    </ul>
                </div>
                <!-- 分享end -->
                <!-- 收藏&举报 -->
                <div class="r-box r">
                                                                    <span id="js-follow" data-id="6991" class="dc-follow l">
                        <span>收藏</span>
                    </span>
                </div>
                <!-- 收藏&举报end -->

            </div>
        </div>
        <!-- 文章详情end -->

        <!-- 相关阅读 -->
        <div class="react-article">
            <ul></ul>
        </div>
        <!-- 相关阅读end -->


        <div class="detail-feedback-wrap">
            <!-- 评论框 -->
            <div class="df-ipt-wrap" id="comment">
                <div class="feeds-author">
                    <span><img src="http://img.mukewang.com/user/545862aa0001f8da02200220-80-80.jpg" width="40" alt="慕粉3224635"></span>
                    <span class="nick">慕粉3224635</span>
                </div>

                <div class="df-text">
                    <div id="js-reply-editor-box" class="wd-comment-box js-ci-inner "></div>
                    <p id="feed-error" class="feed-error"></p>
                    <div class="df-bottom clearfix">
                        <div class="verify-code"></div>
                        <button id="js-submit" class="btn btn-green r">评论（Ctrl+Enter）</button>
                    </div>
                </div>

            </div>
            <!-- 评论框end -->

            <!-- 热门评论 -->
            <div class="hot-df-title">热门评论</div>
            <div id="js-feedback-hot-list-wrap" class="feedback-list">
                <p class="feedback-loading">
                    评论加载中...
                </p>
            </div>
            <!-- 评论 -->
            <div class="df-title" id="all_comments">全部评论<span class="comment-num"><i></i>条</span></div>
            <div id="js-feedback-list-wrap" class="feedback-list">
                <p class="feedback-loading">
                    评论加载中...
                </p>
            </div>
            <!-- 分页页码  -->
            <div class="qa-comment-page"></div>
        </div>
    </div><!-- 左侧end -->

    <div class="detail-right r"><!-- 右侧start -->
        <!-- 作者信息 -->
        <div class="aside-author">
            <div class="p clearfix">
                <a href="/u/283020/articles" class="l" title="Kodo" target="_blank">
                    <img src="http://img.mukewang.com/5333a01a0001ee5302000200-100-100.jpg">
                </a>
            </div>
            <a class="nick" href="/u/283020/articles" title="Kodo" target="_blank">
                Kodo
            </a>
            <i class="user-icon ismooc" title="慕星人"></i>
            <span class="user-job">Web前端工程师</span>
        <span class="user-desc">
            因为没有能力能保护所爱的人，所以不得不让自己更强大
        </span>
            <div class="btn-box clearfix">
                <a href="/u/283020/articles" target="_blank" class="article-num r-bor l">
                    <span></span>篇文章
                </a>
                <a href="/u/283020/articles?type=praise" target="_blank" class="article-recom l">
                    <span></span>推荐
                </a>
            </div>
        </div>
        <!-- 作者信息end -->

        <!-- 作者热门文章 -->
        <div class="other-article">
            <h2>作者的热门文章</h2>
            <ul>
                <li>
                    <a href="/article/2220" title="可想自己造一个jQuery库？(十二完结篇)"><h3>可想自己造一个jQuery库？(十二完结篇)</h3></a>
                    <p>前言 1.虽然说市面上有许多讲解jQuery源码或者是也有类似如何搭建一个属于自己的javascript库的文章。 2.但毕竟更多数人的水平并没有达到单纯看源码解析就能读懂jQuery 3.如果你既不能通过书籍视频和他人文章的源码解析明白jQuery，也想自己实现一个jQuery的。 4.本系列就是以一些不同的方法手段，简单的代码，实现了一</p>
                    <div class="show-box clearfix">
                        <span class="spacer l">1095浏览</span>
                        <span class="spacer l spacer-2">18推荐</span>
                        <span class="spacer l" href="" >3评论</span>
                    </div>
                </li>
                <li>
                    <a href="/article/5015" title="教你如何预判用户手势行为"><h3>教你如何预判用户手势行为</h3></a>
                    <div class="show-box clearfix">
                        <span class="spacer l">714浏览</span>
                        <span class="spacer l spacer-2">14推荐</span>
                        <span class="spacer l" href="" >6评论</span>
                    </div>
                </li>
                <li>
                    <a href="/article/2583" title="vue自定义指令实现v-tap插件"><h3>vue自定义指令实现v-tap插件</h3></a>
                    <div class="show-box clearfix">
                        <span class="spacer l">1253浏览</span>
                        <span class="spacer l spacer-2">7推荐</span>
                        <span class="spacer l" href="" >4评论</span>
                    </div>
                </li>
                <li>
                    <a href="/article/2043" title="可想自己造一个jQuery库？(四)"><h3>可想自己造一个jQuery库？(四)</h3></a>
                    <div class="show-box clearfix">
                        <span class="spacer l">330浏览</span>
                        <span class="spacer l spacer-2">4推荐</span>
                        <span class="spacer l" href="" >5评论</span>
                    </div>
                </li>
                <li>
                    <a href="/article/1926" title="可想自己造一个jQuery库？(一)"><h3>可想自己造一个jQuery库？(一)</h3></a>
                    <div class="show-box clearfix">
                        <span class="spacer l">625浏览</span>
                        <span class="spacer l spacer-2">7推荐</span>
                        <span class="spacer l" href="" >1评论</span>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 作者热门文章end -->

        <!-- 广告 -->
        <!-- 广告end -->

    </div><!-- 右侧end -->

    <!-- 文章目录 -->
    <!-- 文章目录end -->


</div><!--opus-wrap end-->

<div id="main">

</div>
<!--底部-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--底部-->
    <div id="footer" >
        <div class="waper">
            <div class="footerwaper clearfix">
                <div class="followus r">
                    <a class="followus-weixin" href="javascript:;"  target="_blank" title="微信">
                        <div class="flw-weixin-box"></div>
                    </a>
                    <a class="followus-weibo" href="http://weibo.com/u/3306361973"  target="_blank" title="新浪微博"></a>
                    <a class="followus-qzone" href="http://user.qzone.qq.com/1059809142/" target="_blank" title="QQ空间"></a>
                </div>
                <div class="footer_intro l">
                    <div class="footer_link">
                        <ul>
                            <li><a href="http://www.imooc.com/" target="_blank">网站首页</a></li>
                            <li><a href="/about/job" target="_blank">人才招聘</a></li>
                            <li> <a href="/about/contact" target="_blank">联系我们</a></li>
                            <li><a href="http://yun.imooc.com/" target="_blank">慕课云</a></li>
                            <li><a href="/corp/index" target="_blank">合作专区</a></li>
                            <li><a href="/about/us" target="_blank">关于我们</a></li>
                            <li> <a href="/about/recruit" target="_blank">讲师招募</a></li>
                            <li> <a href="/user/feedback" target="_blank">意见反馈</a></li>
                            <li> <a href="/about/friendly" target="_blank">友情链接</a></li>
                        </ul>
                    </div>
                    <p>Copyright © 2016 imooc.com All Rights Reserved | 京ICP备 13046642号-2</p>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

<div id="J_GotoTop" class="elevator">
    <a class="elevator-weixin" href="javascript:;">
        <div class="elevator-weixin-box">
        </div>
    </a>
    <a class="elevator-msg" href="/user/feedback" target="_blank" id="feedBack"></a>
    <a class="elevator-app" href="http://www.imooc.com/mobile/app" >
        <div class="elevator-app-box">
        </div>
    </a>
    <a class="elevator-top" href="javascript:;" style="display:none" id="backTop"></a>
</div>
<div style="display: none">


</div>
</body>
</html>